<template>
	<view class="checkbox-container" @tap="toggleCheckbox">
		<view class="checkbox-input" :class="[{ 'checked': isChecked }]">
			<view class="tick"></view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			value: {
				type: Boolean,
				default: false
			},
			checked: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				isChecked: this.checked || this.value
			}
		},
		watch: {
			value(newVal) {
				this.isChecked = newVal;
			},
			checked(newVal) {
				this.isChecked = newVal;
			}
		},
		methods: {
			toggleCheckbox() {
				this.isChecked = !this.isChecked;
				this.$emit('input', this.isChecked);
				this.$emit('change', this.isChecked);
			}
		}
	}
</script>

<style>
	.checkbox-container {
		display: flex;
		align-items: center;
		cursor: pointer;
		justify-content: center;
	}

	.checkbox-input {
		width: 16px;
		height: 16px;
		border-radius: 2px;
		border: 1px solid #ccc;
		position: relative;
	}

	.checkbox-input .tick {
		transform: none;
	}

	.checkbox-input.checked {
		background-color: #09bb07;
		border-color: #09bb07;
	}

	.checked .tick {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-106%, -23%) rotateX(170deg) rotate(238deg);
		width: 8px;
		height: 4px;
		border-bottom: 2px solid #fff;
		border-right: 2px solid #fff;
		transform-origin: bottom right;
		transition: all 1s;
	}

	.checkbox-label {
		font-size: 14px;
	}
</style>